<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css3_show.css">
</head>
<body>
    <div class="main" style="overflow: hidden;">
        <div class="div-line" style="margin-top:20px">Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。</div>
        <div class="div-line">3D旋转</div>
        <ul class="one1">
            <li>
                <div class="li-a">HOME</div>
                <div class="li-b">首页</div>
            </li>
            <li>
                <div class="li-a">H2</div>
                <div class="li-b">分类2</div>
            </li>
            <li>
                <div class="li-a">H3</div>
                <div class="li-b">分类3</div>
            </li>
            <li>
                <div class="li-a">H4</div>
                <div class="li-b">分类4</div>
            </li>
            <li>
                <div class="li-a">H5</div>
                <div class="li-b">分类5</div>
            </li>
        </ul>

        <!------------------------------------------->
        <div class="div-line">Css3鼠标经过</div>
        <ul class="one2">
            <li>
                <div></div>
                <p>文字说明</p>
            </li>
        </ul>

        <!------------------------------------------->
        <!--<div class="div-line">Css3鼠标经过2</div>-->
        <ul class="one3">
            <li>
                <img src="img/04.jpg" alt="">
                <div>说明文字</div>
            </li>

        </ul>

        <!------------------------------------------->
       <!-- <div class="div-line">Css3鼠标经过4</div>-->
        <ul class="one5">
            <li>
                <img src="img/03.jpg" alt="">
                <div>文字说明</div>
            </li>

        </ul>

        <!------------------------------------------->
        <!--<div class="div-line">Css3鼠标经过3</div>-->
        <ul class="one4">
            <li>
                <img src="img/05.jpg" alt="">
                <div></div>
                <p>说明文字</p>
            </li>

        </ul>

        <!------------------------------------------->
        <div class="div-line">图标提示</div>
        <ul class="one6">
            <li style="margin-left: -50px;">
                <div>one</div>
                <img src="img/lo1.png" alt="">
            </li>
            <li>
                <div>two</div>
                <img src="img/lo2.png" alt="">
            </li>
            <li>
                <div>three</div>
                <img src="img/lo3.png" alt="">
            </li>
            <li>
                <div>four</div>
                <img src="img/lo4.png" alt="">
            </li>
        </ul>


    </div>
</body>
</html>






















